<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" th:src="@{/js/jquery-1.12.4.js}"></script>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>营销管理</li>
    <li>订购单管理</li>
    <li>添加</li>
  </ul>
</div>
<form class="formbody" action="/erp1/market/orders/addOrders" method="post">
  <div class="formtitle"><span>订购单信息</span></div>
  <ul class="forminfo">
    <li>
      <label>订单编号</label>
      <input name="orderid" type="text" value="DJ201711180001" readonly="readonly" class="roinput" />
      <i>自动生成不能编辑</i>
    </li>
      <script>
          $(function () {
              SCOrderId();
          });
          function SCOrderId() {
              var date = new Date();
              $("input[name=orderid]").val("DJ" + date.getTime());
          }
      </script>
    <li>
        <input type="hidden" name="uid" th:value="${session.currUser.uId}">
      <label>客户姓名</label>
        <select name="customid" type="text" class="dfinput" >
            <option value="0">请选择</option>
        </select>
      <i>不能为空</i>
    </li>
      <script>
          $(function () {
              $.ajax({
                  url:"/erp1/market/orders/ajaxCustomAll",
                  data:{"uid":$("input[name=uid]").val()},
                  dataType:"JSON",
                  success:function (data) {
                      console.log(data);
                      console.log(typeof data);
                      var op="<option value='0'>请选择</option>";
                      $.each(data,function (i, e) {
                          op += "<option value='" + e.customid + "'>" + e.customname + "</option>";
                      });
                      $("select[name=customid]").html("");
                      $("select[name=customid]").append(op);
                  },error:function () {
                      console.log("错误")
                  }
              });
          });
      </script>

    <li>
      <label>订购时间</label>
      <input name="date" type="text"  readonly="readonly" class="roinput" />
      <i>不能编辑</i>
    </li>
      <script>
          $(function () {
              $("input[name=date]").val(getFormatDate());
          });
          function getFormatDate() {
              var date = new Date();
              var month = date.getMonth() + 1;
              var strDate = date.getDate();
              if (month >= 1 && month <= 9) {
                  month = "0" + month;
              }
              if (strDate >= 0 && strDate <= 9) {
                  strDate = "0" + strDate;
              }
              var currentDate = date.getFullYear() + "-" + month + "-" + strDate
                  + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
              return currentDate;
          }
      </script>
    <li>
      <label>创建人</label>
        <input name="" type="text" th:value="${session.currUser.uname}" readonly="readonly" class="roinput"/>
        <input name="operatorid" type="hidden" th:value="${session.currUser.uId}"/>
      <i>不能编辑</i>
    </li>
    <li>
      <label>审核状态</label>
        <input type="text" value="未审核" readonly="readonly" class="roinput"/>
        <input name="status" type="hidden" value="1"/>
      <i>初始状态，不能编辑</i>
    </li>
    <li>
      <label>总金额</label>
      <input name="ordermoney" type="text" readonly="readonly" class="roinput"/>
       <i>自动运算，不能编辑</i>
    </li>
    <li>
        <input type="button" value="新增" onclick="xinzeng()" class="smallbtn"/>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="删除" onclick="shanchu()" class="smallbtn"/>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="submit" value="保存" class="smallbtn"/>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="返回" class="smallbtn" onclick="window.history.go(-1);"/>
    </li>
  </ul>
    <script>
        $(function () {
            $("#tbody").on("change", ".brandSelect", function () {
                var $typeSelect = $(this).parent().next().children("select");
                $.ajax({
                    url: "/erp1/market/orders/ajaxTypeByBrandId",
                    data: {"brandId": $(this).val()},
                    dataType: "JSON",
                    success: function (data) {
                        //console.log(data);
                        //console.log(typeof data);
                        var tr = "<option value='0'>请选择</option>";
                        $.each(data, function (i, t) {
                            tr += "<option value='" + t.typeId + "'>" + t.typeName + "</option>";
                        });
                        $typeSelect.html("");
                        $typeSelect.append(tr);
                    }, error: function () {
                        console.log("错误");
                    }
                });
            });
            $("#tbody").on("change", ".typeSelect", function () {
                var $productSelect = $(this).parent().next().children("select");
                $.ajax({
                    url: "/erp1/market/order/ajaxProductTypeId",
                    data: {"typeId": $(this).val()},
                    dataType: "JSON",
                    success: function (data) {
                        //console.log(data);
                        //console.log(typeof data);
                        var tr = "<option value='0'>请选择</option>";
                        $.each(data, function (i, p) {
                            tr += "<option value='" + p.productId + "'>" + p.productModel + "</option>";
                        });
                        $productSelect.html("");
                        $productSelect.append(tr);
                    }, error: function () {
                        console.log("错误");
                    }
                });
            });
            $(".tablelist").on("click", "#checkboxP", function () {
                var ch = $("#checkboxP").prop("checked");
                $(".checkboxC").prop("checked", ch);
            });
            $("#tbody").on("click", ".checkboxC", function () {
                checkboxC1();
            });
            $("#tbody").on("blur", ".num", function () {
                var $price = $(this).parent().next().next().children("input");
                if ($(this).val() != '' && $price.val() != '') {
                    $(this).parent().next().next().next().children("input").val(($(this).val() * $price.val()));
                    jisuan()
                }else{
                    $(this).parent().next().next().next().children("input").val(0);
                    jisuan()
                }
            });
            $("#tbody").on("blur", ".price", function () {
                var $num = $(this).parent().prev().prev().children("input");
                if ($(this).val() != '' && $num.val() != '') {
                    $(this).parent().next().children("input").val(($(this).val() * $num.val()));
                    jisuan();
                }else{
                    $(this).parent().next().children("input").val(0);
                    jisuan();
                }
            });
        });

        function jisuan() {
            var $sum = $(".sum");
            var prototal=0;
            for (var i = 0; i < $sum.length; i++) {
                prototal+=($($sum[i]).val()*1);
            }
            $("input[name=ordermoney]").val(prototal);
        }

        function checkboxC1() {
            var checkboxC = $(".checkboxC");
            var count = 0;
            for (var i = 0; i < checkboxC.length; i++) {
                if ($(checkboxC[i]).prop("checked")) {
                    count++;
                    console.log(count);
                }
            }
            if (count == checkboxC.length) {
                $("#checkboxP").prop("checked", true);
            } else {
                $("#checkboxP").prop("checked", false);
            }
        }

        function xinzeng() {
            var count = $("#tbody>tr:last-child>td:eq(1)").text();
            var tr = "<tr><td><input type='checkbox' class='checkboxC'/></td>";
            tr += "<td>" + (count * 1 + 1 * 1) + "</td>";
            tr += "<td><select class='brandSelect' name='brandId'><option value='0'>请选择</option>";
            $.ajax({
                url: "/erp1/market/order/ajaxBrandAll",
                dataType: "JSON",
                success: function (data) {
                    // console.log(data);
                    //console.log(typeof data);
                    $.each(data, function (i, b) {
                        tr += "<option value='" + b.brandId + "'>" + b.brandName + "</option>";
                    });
                    tr += "</select></td>";
                    tr += "<td><select class='typeSelect' name='typeId'><option value='0'>请选择</option></select></td>";
                    tr += "<td><select class='productSelect' name='productId'><option value='0'>请选择</option></select></td>";
                    tr += "<td><input type='text' name='purchaseNum' class='num'/></td><td>台</td>";
                    tr += "<td><input type='text' name='proprice' class='price'/></td>";
                    tr += "<td>￥<input readonly type='text' name='prototal' class='sum' style='border: 0px white solid' /></td>";
                    tr += "</tr>";
                    $("#tbody").append(tr);
                }, error: function () {
                    console.log("错误");
                }
            });
        }

        function shanchu() {
            var checkboxC = $(".checkboxC");
            for (var i = 0; i < checkboxC.length; i++) {
                if ($(checkboxC[i]).prop("checked")) {
                    $(checkboxC[i]).parents("tr").remove();
                }
            }
            $("#checkboxP").prop("checked", false);
            jisuan();
        }
    </script>
  <table class="tablelist">
      <thead>
        <tr>
          <th><input type="checkbox" id="checkboxP"/></th>
          <th>序号</th>
          <th>品牌</th>
          <th>类型</th>
          <th>型号</th>
          <th>数量</th>
          <th>单位</th>
          <th>单价</th>
          <th>金额</th>
        </tr>
      </thead>
      <tbody id="tbody">
      	<!--<tr>-->
          <!--<td>1</td>-->
          <!--<td>-->
          	<!--<select>-->
            	<!--<option>请选择</option>-->
                <!--<option>联想</option>-->
                <!--<option>海尔</option>-->
                <!--<option>小米</option>-->
            <!--</select>-->
          <!--</td>-->
          <!--<td>-->
          	<!--<select>-->
            	<!--<option>请选择</option>-->
                <!--<option>笔记本电脑</option>-->
                <!--<option>台式电脑</option>-->
                <!--<option>手机</option>-->
            <!--</select>-->
          <!--</td>-->
          <!--<td>-->
          	<!--<select>-->
            	<!--<option>请选择</option>-->
                <!--<option>X260</option>-->
                <!--<option>E470</option>-->
                <!--<option>T470</option>-->
            <!--</select>-->
          <!--</td>-->
          <!--<td><input type="text" /></td>-->
          <!--<td>台</td>-->
          <!--<td><input type="text" /></td>-->
          <!--<td><input type="text" /></td>-->
        <!--</tr>-->
      </tbody>
  </table>
</form>
<script type="text/javascript">
	$('.tablelist tbody tr:odd').addClass('odd');
</script>
</body>
</html>
